<script setup lang="ts">
import Search from '@/components/Search/index.vue'
import APIAdvertising from '@/api/advertising'
import SelfPagination from '@/components/SelfPagination/index.vue'

const queryParams = ref<any>({
    page: 1,
    limit: 8
})

const activeName = shallowRef('video')


const list = shallowRef<any>([])

const value = shallowRef<string>('')
const total = shallowRef<number>(0)

function handleSearch() {
    queryParams.value.keyword = value.value
    getList()
}
const loading = shallowRef<boolean>(false)

watch(activeName, () => {
    getList()
}, { immediate: true })



function getList() {
    loading.value = true
    APIAdvertising.getAdvertisement(activeName.value, queryParams.value).then(({ data, total: count }) => {
        list.value = data
        total.value = count
    }).finally(() => {
        loading.value = false
    })
}

</script>

<template>
    <div class="advertising">
        <Search v-model="value" @on-btn-click="handleSearch" />
        <div class="title">投放广告的产品</div>
        <div class="tabs-icon">
            <el-tabs v-model="activeName" class="tabs">
                <el-tab-pane label="视频" name="video"></el-tab-pane>
                <el-tab-pane label="图片" name="picture"></el-tab-pane>
                <el-tab-pane label="音乐" name="music"></el-tab-pane>
                <el-tab-pane label="字体" name="font"></el-tab-pane>
            </el-tabs>
        </div>
        <el-table class="list" :data="list" :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
            v-loading="loading">
            <el-table-column prop="goods_code" label="编号" />
            <el-table-column label="缩略图" v-slot="{ row }">
                <el-image style="width: 80px; height: 53px" :src="row.image" :preview-src-list="[row.image]" fit="cover"
                    :z-index="999" preview-teleported hide-on-click-modal />
            </el-table-column>
            <el-table-column prop="title" label="标题" />
            <el-table-column prop="exposures" label="购买次数" />
            <el-table-column prop="pay_price" label="购买金额" />
            <el-table-column prop="remain_num" label="剩余次数" />
            <el-table-column prop="use_num" label="广告点击数" />
        </el-table>
        <SelfPagination style="margin-top: 50px;margin-right: 30px;" :total="total"
            v-model:current-page="queryParams.page" :page-size="queryParams.limit" @get-list="getList" />
    </div>
</template>

<style lang="scss">
.advertising {
    .el-table__row {
        font-family: 'SOURCEHANSANSCN-EXTRALIGHT';
    }

    .cell {
        font-family: 'SOURCEHANSANSCN-EXTRALIGHT';
    }
}
</style>

<style lang="scss" scoped>
.advertising {
    width: 99%;
    margin: 0 auto;

    .list {
        width: 99.99%;
        margin: 0 auto;
    }

    .title {
        color: rgba(249, 20, 20, 1);
        font-size: 24px;
        font-weight: 700;
    }

    .tabs-icon {
        position: relative;

        .tabs {
            margin-top: 10px;

            &:deep(.el-tabs__item.is-active) {
                color: #F91414;
            }

            &:deep(.el-tabs__active-bar) {
                background-color: #F91414;
                height: 1px;
            }

            &:deep(.el-tabs__item) {
                &:hover {
                    color: #F91414;
                }
            }

            &:deep(.el-tabs__nav-wrap) {
                &:after {
                    height: 1px !important;
                }
            }
        }
    }
}
</style>
